<template>
  <div class="body">
    <div>
      <NavBar
        title="部门评分"
        :icon="true"
        router="/"
      ></NavBar>
    </div>

    <div class="collapse">
    </div>
    <div>
      <div
        class="list"
        v-for="(item,index) in tableData"
        :key="index"
      >

        <div class="left"></div>
        <div class="item">
          <div>
            <div class="name">{{item.部门}}</div>
            <div class="xianqin">
              {{item.年份}}
            </div>
          </div>

          <div class="value">
          
          </div>
          <div class="value2">
            <el-button
              size="mini"
              :disabled="item.disabled"
              type="primary"
              @click="onChange(item,index)"
            >确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar/navBar";
import request from "../../utils/request";
import linq from "linq";
import { MessageBox } from "element-ui";
export default {
  components: {
    NavBar
  },
  name: "Check",
  data() {
    return {
      //
      年份: "2019",
      tableData: [],
      deps: [
        "创新强校办公室",
        "人事处",
        "党政办公室",
        "国际合作学院",
        "党委学生工作部",
        "创新创业学院",
        "教务处",
        "图书馆",
        "资产管理处",
        "保卫处",

        "心理中心",
        "基建工程管理中心",
        "科技与校企合作处",
        "实训中心",
        "党委组织部",
        "工会",
        "财务处",
        "信息中心",
        "审计处"
      ]
      //
    };
  },
  created() {
    //

    this.fetchData();
    //
  },
  methods: {
    async fetchData() {
      //
      let res = await request({
        url: "/Performance",
        method: "get",
        params: {
          query: {
            cate: "部门评分",
            年份: this.年份
          }
        }
      });
      if (res.data.length == 0) {
        //
        var datas = this.deps.map(e => {
          return { 年份: "2019", 总分: 0, 部门: e, cate: "部门评分",评分记录:[] };
        });
        await request({
          method: "post",
          url: "performance",
          data: datas
        });
        //
        res = await request({
          url: "/performance",
          method: "get",
          params: {
            query: {
              cate: "部门评分",
              年份: this.年份
            }
          }
        });
        //
      }
      var list = res.data.map(item => {
        var record = linq
          .from(item.评分记录)
          .firstOrDefault(`$.number=="${this.$root.user.number}"`, null);
        return {
          _id: item._id,
          年份: item.年份,
          部门: item.部门,
          disabled: record == null ? false : record.score == 0 ? false : true,
          评分分数: record == null ? 0 : record.score
        };
      });
      this.tableData = list;
    },
    async onChange(item, index) {
      await MessageBox.confirm("你确定要录入分数吗?一旦录入不能更改!");
      var row = this.tableData[index];
      let res = await request({
        url: "/Performance",
        method: "put",
        data: {
          query: { _id: item._id },
          update: {
            $push: {
              评分记录: {
                score: item.评分分数,
                number: this.$root.user.number
              }
            }
          }
        }
      });
      item.disabled = true;
      this.$toast.success("评分成功");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  overflow: hidden;
}
.collapse {
  margin-top: 46px;
}
.titleYear {
  background-color: white;
  height: 2.5rem;
  line-height: 2.5rem;
  border-bottom: 1px solid #ccc;
}
.year {
  margin: 0.1rem 0.5rem;
  font-weight: bold;
}
.van-icon {
  margin-left: 0.2rem;
}
.item {
  height: 4rem;
  /* line-height: 4rem; */
  background-color: white;
  display: flex;
  /* justify-content: space-between; */
  padding: 0 0.7rem;
  margin-bottom: 0.6rem;
  width: 100%;
}
.list {
  display: flex;
  padding-left: 1rem;
}
.left {
  height: 4rem;
  width: 0.7rem;
  background-color: #558ffa;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.name {
  font-weight: bold;
  font-size: 15px;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}
.xianqin {
  margin-top: 0.4rem;
  font-size: 14px;
  color: rgb(180, 179, 179);
}
.value {
  height: 4rem;
  line-height: 4rem;
  position: absolute;
  right: 5rem;
  margin-top: 0.1rem;
}
.value2 {
  height: 4rem;
  line-height: 4rem;
  position: absolute;
  right: 1rem;
}
</style>
